<template>
	<view class="table">
		<view class="thead">
			<text class="th">书名</text>
			<text class="th">数量</text>
			<text class="th">操作</text>
		</view>
		<view class="tbody">
			<view class="tr" v-for="(item,index) in books" :key="id">
				<text class="td">{{item.name}}</text>
				<view class="td">
					<button type="warn" size="mini" @click="handleDown(item)">-</button>
					<text>{{item.num}}</text>
					<button type="warn" size="mini" @click="handleUp(index)">+</button>
				</view>
				<view class="td">
					<button type="primary" size="mini" @click="handleRemove(index)">x</button>
				</view>
			</view>
		</view>
		<u-button text="月落"></u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				books: [
					{ id: 1, author: '曹雪芹', name: '红楼梦', num: 1, price: 32.0 },
					{ id: 2, author: '施耐庵', name: '水浒传', num: 2, price: 30.0 },
					{ id: 3, author: '罗贯中', name: '三国演义', num: 4, price: 24.0 },
					{ id: 4, author: '吴承恩', name: '西游记', num: 3, price: 20.0 },
				],
			}
		},
		methods: {
			handleRemove(i) {
				this.books.splice(i, 1)
			},
			handleDown(book) {
				book.num--;
			},
			handleUp(i) {
				this.books[i].num++;
			},
		}
	}
</script>

<style>
	.table .thead {
		background-color: orange;
		padding: 20rpx;
		display: flex;
		justify-content: space-around;
	}

	.table .tbody .tr {
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-bottom: 1rpx solid #eee;
		padding: 10rpx 0;
	}

	.table .tbody .td {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.table .tbody .td text {
		margin: 0 10rpx;
	}
</style>